<template>
	<!-- 20221213 -->
	<view class="tab-vertical-cn width-100p height-100p bg-f5">
		<!-- 组件内容 -->
		<view class="cn-content">
			<scroll-view class="width-100p height-100p" scroll-y scroll-with-animation>
				<view class="position-relative padding-lr-10 line-height-100 text-center text-cut-one"
					:class="index == active ? 'text-28 text-bold text-1a' : 'text-26 text-33'"
					v-for="(item,index) in list1" :key="index" @click="click(index)" :id="'tabName'+index">
					<view class="tab-vertical-line" v-if="index == active"></view>
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			// 数据显示
			list: { 
				type: Array,
				default: []
			},
			// 当 list 是一个 对象数组 时，通过 该参数 来指定 Object 中 key 的值作为选择器显示内容
			listKey: { 
				type: String,
				default: 'name'
			},
			// 当前激活标签的索引
			active: { 
				type: Number,
				default: 0
			},
		},
		
		computed: {
			// 实际显示数组
			list1() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.name = this.list[i][this.listKey]
					} else {
						obj.name = this.list[i]
					}
					array.push(obj)
				}

				return array
			},
		},

		methods: {
			/**
			 * 点击一级分类
			 * @param {Object} index
			 */
			click(index) {
				// 更新选中状态
				this.$emit("update:active", index)
				// 回调（当前选中值）
				this.$emit('click', index);
			}
		}
	}
</script>

<style scoped>
	/* 左侧主色线 */
	.tab-vertical-line {
		width: 6rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
		top: 30rpx;
		background: var(--main);
	}
</style>
